import { Input } from "antd"
import { FC } from "react"

import { SFormItem } from "@/components/common"
import { useLocale } from "@/locales"

export type userNameInputField = {
	userNameInputCode: string
}

const UserNameInput: FC<{ fieldName?: string; placeholder?: string }> = props => {
	const { formatMessage } = useLocale()
	const defaultNormalize = (value: string) => value.replaceAll(" ", "") || undefined
	const { fieldName, placeholder } = props
	return (
		<SFormItem name={fieldName ?? "userName"} normalize={defaultNormalize} label={formatMessage({ id: "funds.user_name" })}>
			<Input allowClear style={{ width: "200px" }} placeholder={placeholder ?? formatMessage({ id: "label.please_enter" })} />
		</SFormItem>
	)
}

export default UserNameInput
